import BaseRenderer from 'diagram-js/lib/draw/BaseRenderer';

import {
    append as svgAppend,
    create as svgCreate
} from 'tiny-svg';
import { customElements, customConfig, hasLabelElements } from './util';

const HIGH_PRIORITY = 1500;

export default class CustomRenderer extends BaseRenderer {
    constructor(eventBus: any, bpmnRenderer: any, modeling: any) {
        super(eventBus, HIGH_PRIORITY);

        this.bpmnRenderer = bpmnRenderer;
        this.modeling = modeling;
    }

    canRender(element: any) {
        // ignore labels
        return !element.labelTarget;
    }

    createElement(type: any, parentNode: any, attr = {}) {
        const element = document.createElement(type);

        for (const key of Object.keys(attr)) {
            element.setAttribute(key, attr[key]);
        }

        parentNode.appendChild(element);
        return element;
    }

    drawShape(parentNode: any, element: any) {
        const type = element.businessObject.$attrs.taskType || element.type; // 获取到类型
        if (customElements.includes(type)) { // or customConfig[type]
            const { attr, className } = customConfig[type];
            const customIcon: any = svgCreate('foreignObject', {
                ...attr,
                class: className
            });
            element.width = attr.width; // 这里我是取了巧, 直接修改了元素的宽高
            element.height = attr.height;
            svgAppend(parentNode, customIcon);
            const div = this.createElement("div", customIcon, {
                style: "width: 28px;height: 28px;"
            });
            this.createElement("div", div, {
                class: "render-node-" + className
            });
            // 判断是否有name属性来决定是否要渲染出label
            if (!hasLabelElements.includes(type) && element.businessObject.name) {
                const text: any = svgCreate('text', {
                    x: attr.x,
                    y: attr.y + attr.height + 20,
                    "font-size": "14",
                    fill: "#000"
                });
                text.innerHTML = element.businessObject.name;
                svgAppend(parentNode, text);
            }
            // this.modeling.resizeShape(element, {
            //     x: element.x,
            //     y: element.y,
            //     width: element['width'] / 2,
            //     height: element['height'] / 2
            // })
            return customIcon;
        }
        // else if (type === 'bpmn:TextAnnotation' && element.businessObject.color) {
        //     let color = element.businessObject.color
        //     element.businessObject.di.set('bioc:stroke', color)
        //     const shape = this.bpmnRenderer.drawShape(parentNode, element)
        //     return shape
        // }
        const shape = this.bpmnRenderer.drawShape(parentNode, element);
        return shape;
    }

    getShapePath(shape: any) {
        return this.bpmnRenderer.getShapePath(shape);
    }
}

CustomRenderer.$inject = ['eventBus', 'bpmnRenderer', 'modeling'];
